<template>
  <div class="vue_app" style="position: absolute;width: 100%;height: 100%;padding-top:5.2rem;overflow: hidden ">
    <header class="customHeaderStyle" style="position: absolute; top: 0">
      <div>
        <div class="go-back" @click="$router.go(-1)">
          <i></i>
          <i></i>
          <i></i>
        </div>
        <div class="headerCustomTitle">{{titleInfor[activeIndex].goodsClassName}}</div>
        <div v-if="false" class="right_icon" @click="search = !search;">
          <a id="order-search" class="search_icon"><i class="icon njfont nj-sousuo"></i></a>
        </div>
      </div>
      <div class="iscroll_list classify_tab second_level" ref="outerEle" style="height: 2.3rem;position: relative">
        <tab-head :titleInfor="titleInfor" :isShowNum="true">
        </tab-head>
      </div>
    </header>


    <div style="width: 100%;height:100%;position: relative">
      <!--搜索相关内容展示 end-->
      <translate-group :lengths="2" @scrollBottom="loadingMore" ref="translateGroup">
        <div slot="0" slot-scope="{scrollY}">
          <can-after-sale-list-page
            ref="canAfterSale"
            :scrollY="scrollY"
            @refresh="refresh"
            @clearLoading="clearLoading">
          </can-after-sale-list-page>
        </div>
        <div slot="1" slot-scope="{scrollY}">
          <after-sale-list-page ref="afterSaleList"
                                :scrollY="scrollY"
                                @refresh="refresh"
                                @clearLoading="clearLoading"
                                @afterSaleListCount="afterSaleListCount">
          </after-sale-list-page>
        </div>

      </translate-group>
      <!--预约单查询 end-->

      <!--刷新按键-->
      <div v-if="isRefresh" class="no_data" style=" width: 100%;height: 50%;padding-top: 5rem">
        <div class="back_home aui-btn aui-btn-outlined" @click.stop="pageRefresh">刷新页面</div>
      </div>
      <!--搜索相关内容展示-->
    </div>

    <div class="cjy-mask_bj" :style="search ? 'display:block' : 'display:none'" @click="search=false">

    </div>
  </div>
</template>

<script>
  import TabHead from "@/real-components/TabHeadOrder"
  import AfterSaleListPage from "./afterSaleListPage/index.vue"
  import axios from "axios"
  import API from '@/api/cjy-api'
  import {Toast} from '@/utils/toast'
  import changeTime from "@/utils/translateDate"
  import {mapGetters, mapMutations} from "vuex";
  import {showLoading, hideLoading} from "@/utils/loading";
  import {getOrderCount} from "@/utils/ReturnAxios"
  import TranslateGroup from "@/real-components/TranslateMain"
  import CanAfterSaleListPage from './canAfterSaleListPage'

  var {goodsList, H5_HOST_URL, goodsListPage} = API()
  export default {
    data() {
      return {
        titleInfor: [
          {
            goodsClassId: 0,
            goodsClassName: "申请售后",
            goodsNum: 0
          },
          {
            goodsClassId: 1,
            goodsClassName: "申请记录",
            goodsNum: 0
          }
        ], //tapHead中分类的种类
        orderInfor: null,
        search: false,
        fromDate: "",
        toDate: "",
        keyword: null,
        isRefresh: false,
        protoData: [],
        pageSize: 5,
        canAfterSaleControl: {pageNum: 1, totalCount: 0, activePage: 1, position: 0},
        afterSaleListControl: {
          pageNum: 1,
          totalCount: 0,
          activePage: 1
        }
      }
    },

    components: {
      TabHead,
      TranslateGroup,
      AfterSaleListPage, //超值促销的页面结构
      CanAfterSaleListPage
    },
    beforeCreate() {
      //修改index狀態
      var beforIndex = this.$route.query.activeIndex || 0
      if (beforIndex == 1) {
        this.$store.dispatch("cjy/changeClassifyIndex", 1)
      } else {
        this.$store.dispatch("cjy/changeClassifyIndex", 0)
      }
    },
    async beforeRouteEnter(toRoute, fromRoute, next) {
      console.log(toRoute, fromRoute)
      switch (fromRoute.name) {
        case 'afterSale':
          break;
        case 'afterSaleDetail':
          break;
        default :
          await localforage.removeItem('afterSaleList')
      }
      next()
    },

    async beforeRouteLeave(toRoute, fromRoute, next) {
      await localforage.setItem('afterSaleList', [
        this.$refs.afterSaleList.savePagePosition(),
        this.$refs.canAfterSale.savePagePosition()])
      next()
    },
    created() {
      var keyword = this.$route.query.orderSubNo || ""
      this.init()
      this.animateLodding()
    },

    methods: {
      refresh() {
        var translateGroup = this.$refs.translateGroup
        translateGroup && translateGroup.refresh()
      },
      changeTime,// 日期转换

      init() {
        this.titleInfor[0].goodsNum = this.canAfterSaleCount
        this.$store.dispatch('cjy/getOrderCount')
      },
      pageRefresh() {
        this.isRefresh = false
      },
      afterSaleListCount(data) {
        this.titleInfor[1].goodsNum = data
      },

      //加载动画
      animateLodding() {
        this.setTimeOut && clearTimeout(this.setTimeOut)
        showLoading()
        var that = this
        this.setTimeOut = setTimeout(() => {
          Toast({
            message: "加载超时",
            type: 'fail'
          })
          this.isRefresh = true
          hideLoading()
        }, 6000)
      },
      //清除动画

      clearLoading() {
        var timeOut = this.setTimeOut
        hideLoading()
        clearTimeout(timeOut)
      },

      //通过keywords 申请书
      selectByKeyWords(value) {
        var keyword = this.keyword //用于筛选的关键字
        return value.filter((item) => {  //通过关键字来筛选数据
          var isreturn = false   // 创建一个变量用于鉴定是否需要返回这项数据
          isreturn = isreturn || item.orderNo == keyword  //如果匹配到订单号

          var returnItem = item.orderDetails.filter((item) => {//查找子每条商品中是不是有对应匹配的属性
            var tag = new RegExp(keyword, "g")
            var istrue = tag.test((item).goodsName)
            istrue = istrue || (item.serviceNo && item.serviceNo == keyword)
            istrue = istrue || ((item.goodsModel) && tag.test((item).goodsName))
            return istrue
          })
          isreturn = isreturn || returnItem.length > 0
          return isreturn
        })
      },


      loadingMore() {
        if (this.activeIndex == 0) {
          this.$refs.canAfterSale && this.$refs.canAfterSale.loadMore()
        } else if (this.activeIndex == 1) {
          this.$refs.canAfterSale && this.$refs.afterSaleList.loadMore()
        }
      }
    },

    watch: {
      canAfterSaleCount(data) {
        this.titleInfor[0].goodsNum = data
      }
    },

    computed: {
      //获取当前所在页面的index
      activeIndex() {
        if (this.$store.state.cjy.classifyIndex == 0) {
          this.keyword = ""
        }
        return this.$store.state.cjy.classifyIndex
      },
      //获取sessionId
      sessionId() {
        return this.$store.state.wxh.sessionId || localStorage.getItem('sessionId')
      },


      canAfterSaleCount() {
        return this.$store.state.cjy.canAfterSaleCount
      }
      //整理显示数据

      // selectData() {
      //   if (this.protoData) {
      //     var selectData = this.protoData
      //     selectData = this.keyword ? this.selectByKeyWords(selectData) : selectData
      //     return selectData
      //   }
      //   return null
      // },
    },

    beforeDestroy() {
      var setTimeOuts = this.setTimeOut
      hideLoading()
      clearTimeout(setTimeOuts)
    }
  }
</script>

<style>


  .cjy-mask_bj {
    background: rgba(0, 0, 0, 0.3);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 500;
  }
  .customHeaderStyle{
		position: relative;
		background: #fff;
		min-height: 3rem;
		border-bottom: 1px solid #eaeaea;
		color: #444;
		font-weight: 700;
		left: 0;
		top: 0;
		line-height: 2.25rem;
		/* z-index: 2; */
		width: 100%;
		font-size: .9rem;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	.headerCustomTitle{
		overflow: hidden;
		right: 6rem;
		font-weight: 500;
		min-height: 2.25rem;
		position: absolute;
		margin: 0;
		text-align: left;
		white-space: nowrap;
		left: 3rem;
		width: auto;
		text-overflow: ellipsis;
		z-index: 2;
		font-size: 1.1rem;
		margin-top: .35rem;
		top: 1px;
	}
</style>

